<template>
  <a-tree-select
    style="width: 100%"
    :value="value"
    :tree-data="treeData"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder="请选择"
    allow-clear
    :treeDefaultExpandedKeys="expandedKeys"
    @change="onChange"
  />
</template>

<script>
import { TreeSelect } from 'ant-design-vue'
import { listUnitTree } from '@/api/basic/unit'

export default {
  name: 'UnitTree',
  components: {
    ATreeSelect: TreeSelect
  },
  data () {
    return {
      value: undefined,
      expandedKeys: [1],
      treeData: []
    }
  },
  created () {
    listUnitTree()
      .then(res => {
        if (res.message !== 'error') {
          this.treeData = res.result
        } else {
          this.$message.error('操作失败！')
        }
      })
  },
  methods: {
    onChange (value) {
      this.value = value
      this.$emit('getUnit', this.value)
    }
  }
}
</script>
